<template>
  <div class="tab-wrap">
    <div v-for="(item, index) in toolTabData"
         :key="index"
         class="tab-item"
         :class="activeIndex === index ? 'active' : 'cancel'"
         @click="tabItemHandle(index, item)">
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Tabs",
  props: {
    toolTabData: {
      type: Array,
      default: () => {
        return [
          { label: "基本信息", value: "BaseInfo" },
          { label: "账号绑定", value: "AccountBind" },
          { label: "账号安全", value: "AccountSecurity" }
        ];
      }
    }
  },
  data () {
    return {
      activeIndex: 0
    };
  },
  methods: {
    tabItemHandle (index, item) {
      this.activeIndex = index;
      this.$emit("input", item);
    }
  }
};
</script>

<style scoped>
.tab-wrap {
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  font-size: 14px;
}
.tab-item {
  margin-right: 10px;
  width: 120px;
  height: 37px;
  line-height: 37px;
  text-align: center;
  background: var(--prev-bg-lightgrey);
  cursor: pointer;
  border-radius: 10px 10px 0px 0px;
}
.active {
  color: var(--prev-bg-white) !important;
  background: var(--prev-color-primary) !important;
  transition: all 0.2s ease;
}
.cancel {
  color: var(--prev-color-text-darkgrey) !important;
  background: var(--prev-bg-lightgrey) !important;
}
</style>
